<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/baiduhm.js}"></script>

</head>
<body>
<div th:fragment="footer">
    <div id="footer">
        <div class="wrap clearfloat" style="padding: 0 15px;">
            <div class="left footerZx"
                 style="border-bottom: 1px dashed #fff;padding-bottom: 10px;margin-bottom: 10px;line-height: 220%;">


                <p class="footerCopy">
                <div>中山端航科技版权所有 Copyright © surnwo.com</div>
                粤ICP备2023141016号-5
                </p>
            </div>
            <div style="padding: 10px 0 10px 0;">
                <span style="float: left;">技术支持：中山端航科技</span>
                <!--                     creater()-->
                <span style="float: right;" id="showMaskBtn"><img style="width: 22px;" th:src="@{/images/mobile/share.png}">
        </span>
            </div>
        </div>
    </div>
    <!-- 引入 html2canvas 库 -->
    <script type="text/javascript" th:src="@{/js/mobile/html2canvas.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/jquery.qrcode.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/shareJs/share.js}"></script>
    <!-- 添加遮罩层和关闭按钮 -->
    <div id="mask"
         style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px;">
            <span id="closeMaskBtn" style="position: absolute; top: 0px; right: 5px; cursor: pointer;font-size: 30px;">×</span>
            <!-- 这里可以添加遮罩层内的内容 -->
            <div id="content" style="padding: 15px;margin-top: 10px">
                <div id="qrcode" style="margin-top: 10px"></div>
                <div style="text-align: center;color: #b68036;font-weight: bold;margin-top: 10px">宣和艺网</div>
            </div>
            <div id="qr_img"></div>
            <div id="downloadBtn" style="text-align: center;width: 100%;">长按分享二维码</div>
        </div>
    </div>
    <style>
        #qr_img{
            display: none;
        }
        #qr_img img{
            width: 230px;
        }
    </style>
    <script>
        var showQrimg = false;
        // 获取按钮和内容容器
        const downloadBtn = document.getElementById('downloadBtn');
        const content = document.getElementById('content');

        // 按钮点击事件：生成图片并下载
        downloadBtn.addEventListener('click', function () {

            // 使用 html2canvas 渲染内容
            html2canvas(content).then(function (canvas) {
                // 将画布 (Canvas) 转为图片 (Data URL)
                const imgData = canvas.toDataURL('image/png');
                const qrImg = document.getElementById('qr-img');
                qrImg.appendChild(img);


                // 创建下载链接
                const link = document.createElement('a');
                link.href = imgData;
                link.download = 'html_to_image.png'; // 设置下载文件名

                // 模拟点击下载链接
                link.click();
            });
        });
    </script>

    <script>
        // 获取按钮和遮罩层的引用
        const showMaskBtn = document.getElementById('showMaskBtn');
        const mask = document.getElementById('mask');
        const closeMaskBtn = document.getElementById('closeMaskBtn');

        // 点击按钮显示遮罩层
        showMaskBtn.addEventListener('click', () => {
            mask.style.display = 'block';
            if(showQrimg === false){
                $("#qrcode").qrcode({
                    text: window.location.href, //设置二维码内容
                    render: "table", //设置渲染方式
                    width: 200, //设置宽度,默认生成的二维码大小是 256×256
                    height: 200, //设置高度
                    typeNumber: -1, //计算模式
                    background: "#ffffff", //背景颜色
                    foreground: "#000000" //前景颜色
                });
            }
            showQrimg = true;


            // 使用 html2canvas 渲染内容
            html2canvas(content).then(function (canvas) {
                // 将画布 (Canvas) 转为图片 (Data URL)
                // 将 canvas 转换为图片并显示在页面上
                const img = document.createElement('img');
                img.src = canvas.toDataURL("image/png");
                const showMaskBtn = document.getElementById('qr_img');
                showMaskBtn.appendChild(img); // 或者你可以选择添加到特定的容器中

                const qrImg = document.getElementById('qr_img');
                const qrcode = document.getElementById('content');

                // 显示 qr_img 元素
                qrImg.style.display = 'block';
                // 隐藏 qrcode 元素
                qrcode.style.display = 'none';

            });
        });

        // 点击关闭按钮隐藏遮罩层
        closeMaskBtn.addEventListener('click', () => {
            mask.style.display = 'none';
        });
    </script>
</div>
<div th:fragment="footer_menu">
    <div class="wapBottom">
        <ul class="clearfloat">
            <li><a href="/m/index">首页</a></li>
            <li><a href="/m/index/depart/list">艺术机构</a></li>
            <li><a href="/m/index/artist/list">艺术家</a></li>
            <li><a href="/m/index/event/list">线上艺展</a></li>
        </ul>
    </div>
</div>
</body>
</html>
